<?php include("reportheader.php") ?>
<section class="page container">
    <div class="row">
        <div class="span4">
            <h2>Solid Petro Stock</h2>
        </div>
        <div class="span12" style="text-align: center">
            <form id="reportFilter" style="margin-top:12px;">
                <input id="dateFrom" name="dateFrom" type="text" class="datepicker" placeholder="Select From Date"
                       data-validation-format="dd-mm-yyyy" data-validation="date"
                       data-validation-error-msg="Please select To and From Date"/>
                <input id="dateTo" name="dateTo" type="text" class="datepicker" placeholder="Select To Date"
                       data-validation-format="dd-mm-yyyy" data-validation="date"
                       data-validation-error-msg="Please select To and From Date"/>
                <button style="margin-top: -7px;" id="submit-report" type="submit"
                        class="btn btn-box btn-primary " data-style="slide-right"><span
                        id="btnGenerate"> Generate </span>
                </button>
            </form>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="span16">
            <div class="box">
                <div class="box-header">
                    <i class="icon-bar-chart"></i>
                    <h5>Sales Vs Purchase</h5>
                </div>
                <div class="box-content">
                    <div id="salesVsPurchase" style="height:350px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span8">
            <div class="box">
                <div class="box-header">
                    <i class="icon-bar-chart"></i>
                    <h5>Sales Vs Grade</h5>
                </div>
                <div class="box-content">
                    <div id="salesVsGrade" style="height:400px;"></div>

                </div>
            </div>
        </div>
        <div class="span8">
            <div class="box">
                <div class="box-header">
                    <i class="icon-bar-chart"></i>
                    <h5>Purchase Vs Grade</h5>
                </div>
                <div class="box-content">
                    <div id="purchaseVsGrade" style="height:400px;"></div>

                </div>
            </div>
        </div>

    </div>
</section>
<?php include("footer.php") ?>
<script>
    google.load("visualization", "1", {packages: ["corechart"]});
    $(document).ready(function () {
        google.setOnLoadCallback(function () {
            $.post("<?php nav_url("charts/salesVsPurchase") ?>", function (data) {
                drawSalesVsPurchase(data);
            });
            $.post("<?php nav_url("charts/salesVsGrade") ?>", function (data) {
                drawPie(data, 'Sales Vs Grade', 'salesVsGrade');
            });
            $.post("<?php nav_url("charts/purchaseVsGrade") ?>", function (data) {
                drawPie(data, 'Purchase Vs Grade', 'purchaseVsGrade');
            });
        });
    });

    $.validate({
        form: '#reportFilter',
        validateOnBlur: false,
        onError: function () {
            return false;
        },
        onSuccess: function ($form) {
            $("#btnGenerate").text("Please Wait..");
            var spinner = "<div class='spinner'></div>";
            $("#salesVsPurchase").html(spinner);
            $("#salesVsGrade").html(spinner);
            $("#purchaseVsGrade").html(spinner);
            $.post("<?php nav_url("charts/salesVsPurchase") ?>", $form.serialize(), function (data) {
                drawSalesVsPurchase(data);
            });
            $.post("<?php nav_url("charts/salesVsGrade") ?>", $form.serialize(), function (data) {
                drawPie(data, 'Sales Vs Grade', 'salesVsGrade');
            });
            $.post("<?php nav_url("charts/purchaseVsGrade") ?>", $form.serialize(), function (data) {
                drawPie(data, 'Purchase Vs Grade', 'purchaseVsGrade');
            });
            $("#btnGenerate").text("Generate");
            return false;
        }
    });

    function drawSalesVsPurchase(json) {
        json = JSON.parse(json);
        if (json.length > 1) {
            var data = google.visualization.arrayToDataTable(json);
            var options = {
                title: 'Company Performance',
                hAxis: {title: 'Sales Vs Purchase', titleTextStyle: {color: '#333'}},
                vAxis: {minValue: 0},
                height: 350,
                width: '100%'
            };
            var chart = new google.visualization.AreaChart(document.getElementById('salesVsPurchase'));
            chart.draw(data, options);
        } else {
            $("#salesVsPurchase").html("<div class='reportMsg'> No Records Found.</div>")
        }
    }

    function drawPie(json, title, id) {
        json = JSON.parse(json);
        if (json.length > 1) {
            var data = google.visualization.arrayToDataTable(json);
            var options = {
                title: title
            };
            var chart = new google.visualization.PieChart(document.getElementById(id));
            chart.draw(data, options);
        } else {
            $("#" + id).html("<div class='reportMsg'> No Records Found.</div>")
        }
    }
</script>
